<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Table | Element Plus</title>
    <meta name="description" content="A Vue 3 based component library for designers and developers">
    <link rel="stylesheet" href="/assets/style.e2a9e121.css">
    <link rel="modulepreload" href="/assets/chunks/with-status.10422d9e.js">
    <link rel="modulepreload" href="/assets/chunks/contributors.b1907dec.js">
    <link rel="modulepreload" href="/assets/app.9c6c24e4.js">
    <link rel="modulepreload" href="/assets/chunks/dayjs.min.64b12ca8.js">
    <link rel="modulepreload" href="/assets/en-US_component_table.md.f8c35834.lean.js">
    
    <link rel="icon" href="/images/element-plus-logo-small.svg" type="image/svg+xm">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="theme-color" content="#ffffff">
  <meta name="msapplication-TileColor" content="#409eff">
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta property="og:image" content="/images/element-plus-og-image.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:description" content="A Vue 3 based component library for designers and developers">
  <script>window.supportedLangs=["en-US","es-ES","zh-CN"];</script>
  <script>(()=>{const o=window.supportedLangs,a="preferred_lang",r="en-US",s={en:"en-US",fr:"fr-FR",es:"es-ES"};let e=localStorage.getItem(a)||navigator.language;const n=s[e]||(o.includes(e)?e:r);if(localStorage.setItem(a,n),e=n,!location.pathname.startsWith(`/${e}`)){const t=[`/${e}`].concat(location.pathname.split("/").slice(2)).join("/");location.pathname=t.endsWith(".html")||t.endsWith("/")?t:t.concat("/")}navigator&&navigator.serviceWorker.controller&&navigator.serviceWorker.controller.postMessage({type:"LANG",lang:e})})();</script>
  <script async="true" src="https://www.googletagmanager.com/gtag/js?id=UA-175337989-1"></script>
  <script>"serviceWorker"in navigator&&navigator.serviceWorker.register("/sw.js").then(function(o){console.log(o)}).catch(function(o){console.log(o)});</script>
  <script async="true">window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","UA-175337989-1");</script>
  <script async="true" src="https://www.googletagmanager.com/gtag/js?id=G-M74ZHEQ1M1"></script>
  <script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-M74ZHEQ1M1");</script>
  <script async="true">var resource=document.createElement("link");resource.setAttribute("rel","stylesheet"),resource.setAttribute("href","https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,800|Open+Sans:400,600;display=swap"),resource.setAttribute("type","text/css");var head=document.querySelector("head");head.appendChild(resource);</script>
  <script>(()=>{const e=localStorage.getItem("el-theme-appearance");(e==="auto"?window.matchMedia("(prefers-color-scheme: dark)").matches:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  <meta name="twitter:title" content="Table | Element Plus">
  <meta property="og:title" content="Table | Element Plus">
  </head>
  <body>
    <div id="app"><div class="App"><!--[--><span tabindex="-1" data-v-d2e1b550></span><a href="#page-content" class="skip-link visually-hidden" data-v-d2e1b550>Skip to content</a><!--]--><!----><header class="navbar has-sidebar"><div class="navbar-wrapper" data-v-74f3ae96><div class="header-container" data-v-74f3ae96><div class="logo-container" data-v-74f3ae96><a href="/en-US/" data-v-74f3ae96><img class="logo" src="/images/element-plus-logo.svg" alt="Element Plus Logo" data-v-74f3ae96></a></div><div class="content" data-v-74f3ae96><div id="docsearch" class="algolia-search-box search" data-v-74f3ae96></div><nav class="navbar-menu menu" data-v-74f3ae96><!--[--><a class="link-item link is-menu-link" href="/en-US/guide/design" data-v-76aa4338 data-v-36735cb0><!--[--><!--[-->Guide<!--]--><!--]--><!----></a><a class="link-item link is-menu-link active" href="/en-US/component/overview" data-v-76aa4338 data-v-36735cb0><!--[--><!--[-->Component<!--]--><!--]--><!----></a><a class="link-item link is-menu-link" href="/en-US/resource/index" data-v-76aa4338 data-v-36735cb0><!--[--><!--[-->Resource<!--]--><!--]--><!----></a><!--]--></nav><div class="theme-toggler-content theme-toggler" data-v-74f3ae96 data-v-b1b91f92><div aria-label="toggle dark mode" aria-checked="false" data-v-b1b91f92 data-v-0180af72><!----></div></div><div class="translation-container translation" data-v-74f3ae96 data-v-12008bb2><!----></div><div class="social-links" data-v-74f3ae96 data-v-76aa5200><!--[--><a href="https://github.com/element-plus/element-plus" title="GitHub" target="_blank" rel="noreferrer noopener" class="social-link" data-v-76aa5200 data-v-72eabb9c><i class="el-icon" style="font-size:24px;" data-v-72eabb9c><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72eabb9c><path fill="currentColor" d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476c0-.237-.013-1.024-.013-1.862c-2.512.463-3.162-.612-3.362-1.175c-.113-.288-.6-1.175-1.025-1.413c-.35-.187-.85-.65-.013-.662c.788-.013 1.35.725 1.538 1.025c.9 1.512 2.338 1.087 2.912.825c.088-.65.35-1.087.638-1.337c-2.225-.25-4.55-1.113-4.55-4.938c0-1.088.387-1.987 1.025-2.688c-.1-.25-.45-1.275.1-2.65c0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337c1.912-1.3 2.75-1.024 2.75-1.024c.55 1.375.2 2.4.1 2.65c.637.7 1.025 1.587 1.025 2.687c0 3.838-2.337 4.688-4.562 4.938c.362.312.675.912.675 1.85c0 1.337-.013 2.412-.013 2.75c0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z"></path></svg><!--]--></i></a><!--]--></div><button class="reset-btn menu-hamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="full-screen" data-v-74f3ae96><span class="hamburger-1"></span><span class="hamburger-2"></span><span class="hamburger-3"></span></button></div></div></div><!----></header><div class="sub-nav py-3 flex items-center"><button class="reset-btn sidebar-button flex items-center" aria-expanded="false"><i class="el-icon mr-2" style="font-size:20px;"><!--[--><svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="7" width="11" height="2" fill="#606266"></rect><rect x="2" y="11" width="14" height="2" fill="#606266"></rect><rect x="2" y="15" width="8" height="2" fill="#606266"></rect><rect x="2" y="3" width="16" height="2" fill="#606266"></rect></svg><!--]--></i><span class="leading-6">Menu</span></button><button ariadisabled="false" type="button" class="el-button is-link go-back-top height-5" style=""><!--v-if--><span class=""><!--[--> Back to top <!--]--></span></button></div><div class="el-scrollbar sidebar"><div class="el-scrollbar__wrap el-scrollbar__wrap--hidden-default" style=""><div class="el-scrollbar__view" style=""><!--[--><aside><!--[--><div class="page-content-main-b" data-v-0407b15a><p class="title" data-v-0407b15a>Sponsored by</p><div data-v-0407b15a data-v-23d0a532><!--[--><a href="https://melecode.com/" title="美乐 - 企业级全栈低代码开发平台" class="sponsor-item inline-flex" style="" target="_blank" data-v-23d0a532><img src="/images/sponsors/mele-banner.png" alt="美乐" data-v-23d0a532></a><a href="https://vform666.com/" title="VForm - Vue 2/3 可视化低代码表单" class="sponsor-item inline-flex" style="" target="_blank" data-v-23d0a532><img src="/images/sponsors/vform-banner.png" alt="VForm" data-v-23d0a532></a><a href="https://www.jnpfsoft.com/index.html?from=elementUI" title="JNPF - JNPF 低代码开发平台，让开发变得简单！" class="sponsor-item inline-flex" style="" target="_blank" data-v-23d0a532><img src="/images/sponsors/jnpfsoft.jpg" alt="JNPF" data-v-23d0a532></a><!--]--></div><div data-v-0407b15a data-v-97807a40><!--[--><!--]--></div></div><!--]--><div class="sidebar-groups"><!--[--><section class="sidebar-group"><p class="sidebar-group__title">Overview</p><!--[--><a class="link" href="/en-US/component/overview" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Overview</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Basic</p><!--[--><a class="link" href="/en-US/component/button" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Button</p><!----></a><a class="link" href="/en-US/component/border" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Border</p><!----></a><a class="link" href="/en-US/component/color" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Color</p><!----></a><a class="link" href="/en-US/component/container" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Layout Container</p><!----></a><a class="link" href="/en-US/component/icon" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Icon</p><!----></a><a class="link" href="/en-US/component/layout" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Layout</p><!----></a><a class="link" href="/en-US/component/link" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Link</p><!----></a><a class="link flex items-center" href="/en-US/component/text" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Text</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.3.0<!--]--></span><!--v-if--></span></a><a class="link" href="/en-US/component/scrollbar" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Scrollbar</p><!----></a><a class="link" href="/en-US/component/space" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Space</p><!----></a><a class="link" href="/en-US/component/typography" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Typography</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Configuration</p><!--[--><a class="link" href="/en-US/component/config-provider" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Config Provider</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Form</p><!--[--><a class="link" href="/en-US/component/autocomplete" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Autocomplete</p><!----></a><a class="link" href="/en-US/component/cascader" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Cascader</p><!----></a><a class="link" href="/en-US/component/checkbox" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Checkbox</p><!----></a><a class="link" href="/en-US/component/color-picker" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Color Picker</p><!----></a><a class="link" href="/en-US/component/date-picker" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Date Picker</p><!----></a><a class="link" href="/en-US/component/datetime-picker" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>DateTime Picker</p><!----></a><a class="link" href="/en-US/component/form" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Form</p><!----></a><a class="link" href="/en-US/component/input" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Input</p><!----></a><a class="link" href="/en-US/component/input-number" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Input Number</p><!----></a><a class="link" href="/en-US/component/radio" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Radio</p><!----></a><a class="link" href="/en-US/component/rate" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Rate</p><!----></a><a class="link" href="/en-US/component/select" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Select</p><!----></a><a class="link" href="/en-US/component/select-v2" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Virtualized Select</p><!----></a><a class="link" href="/en-US/component/slider" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Slider</p><!----></a><a class="link" href="/en-US/component/switch" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Switch</p><!----></a><a class="link" href="/en-US/component/time-picker" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Time Picker</p><!----></a><a class="link" href="/en-US/component/time-select" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Time Select</p><!----></a><a class="link" href="/en-US/component/transfer" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Transfer</p><!----></a><a class="link flex items-center" href="/en-US/component/tree-select" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>TreeSelect</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.1.8<!--]--></span><!--v-if--></span></a><a class="link" href="/en-US/component/upload" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Upload</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Data</p><!--[--><a class="link" href="/en-US/component/avatar" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Avatar</p><!----></a><a class="link" href="/en-US/component/badge" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Badge</p><!----></a><a class="link" href="/en-US/component/calendar" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Calendar</p><!----></a><a class="link" href="/en-US/component/card" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Card</p><!----></a><a class="link" href="/en-US/component/carousel" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Carousel</p><!----></a><a class="link" href="/en-US/component/collapse" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Collapse</p><!----></a><a class="link" href="/en-US/component/descriptions" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Descriptions</p><!----></a><a class="link" href="/en-US/component/empty" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Empty</p><!----></a><a class="link" href="/en-US/component/image" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Image</p><!----></a><a class="link" href="/en-US/component/infinite-scroll" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Infinite Scroll</p><!----></a><a class="link" href="/en-US/component/pagination" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Pagination</p><!----></a><a class="link" href="/en-US/component/progress" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Progress</p><!----></a><a class="link" href="/en-US/component/result" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Result</p><!----></a><a class="link" href="/en-US/component/skeleton" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Skeleton</p><!----></a><a class="link active" href="/en-US/component/table" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Table</p><!----></a><a class="link flex items-center" href="/en-US/component/table-v2" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Virtualized Table</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.2.0<!--]--></span><!--v-if--></span></a><a class="link" href="/en-US/component/tag" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Tag</p><!----></a><a class="link" href="/en-US/component/timeline" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Timeline</p><!----></a><a class="link flex items-center" href="/en-US/component/tour" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Tour</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.5.0<!--]--></span><!--v-if--></span></a><a class="link" href="/en-US/component/tree" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Tree</p><!----></a><a class="link" href="/en-US/component/tree-v2" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Virtualized Tree</p><!----></a><a class="link flex items-center" href="/en-US/component/statistic" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Statistic</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.2.30<!--]--></span><!--v-if--></span></a><a class="link flex items-center" href="/en-US/component/segmented" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Segmented</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.7.0<!--]--></span><!--v-if--></span></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Navigation</p><!--[--><a class="link" href="/en-US/component/affix" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Affix</p><!----></a><a class="link flex items-center" href="/en-US/component/anchor" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Anchor</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.6.0<!--]--></span><!--v-if--></span></a><a class="link" href="/en-US/component/backtop" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Backtop</p><!----></a><a class="link" href="/en-US/component/breadcrumb" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Breadcrumb</p><!----></a><a class="link" href="/en-US/component/dropdown" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Dropdown</p><!----></a><a class="link" href="/en-US/component/menu" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Menu</p><!----></a><a class="link" href="/en-US/component/page-header" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Page Header</p><!----></a><a class="link" href="/en-US/component/steps" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Steps</p><!----></a><a class="link" href="/en-US/component/tabs" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Tabs</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Feedback</p><!--[--><a class="link" href="/en-US/component/alert" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Alert</p><!----></a><a class="link" href="/en-US/component/dialog" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Dialog</p><!----></a><a class="link" href="/en-US/component/drawer" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Drawer</p><!----></a><a class="link" href="/en-US/component/loading" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Loading</p><!----></a><a class="link" href="/en-US/component/message" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Message</p><!----></a><a class="link" href="/en-US/component/message-box" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Message Box</p><!----></a><a class="link" href="/en-US/component/notification" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Notification</p><!----></a><a class="link" href="/en-US/component/popconfirm" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Popconfirm</p><!----></a><a class="link" href="/en-US/component/popover" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Popover</p><!----></a><a class="link" href="/en-US/component/tooltip" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Tooltip</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Others</p><!--[--><a class="link" href="/en-US/component/divider" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Divider</p><!----></a><a class="link flex items-center" href="/en-US/component/watermark" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Watermark</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.4.0<!--]--></span><!--v-if--></span></a><!--]--></section><!--]--></div><!--[--><!--]--></aside><!--]--></div></div><!--[--><div class="el-scrollbar__bar is-horizontal" style="display:none;"><div class="el-scrollbar__thumb" style="width:;transform:translateX(0%);"></div></div><div class="el-scrollbar__bar is-vertical" style="display:none;"><div class="el-scrollbar__thumb" style="height:;transform:translateY(0%);"></div></div><!--]--></div><main id="page-content" class="page-content has-sidebar"><div class="doc-content-wrapper"><div class="doc-content-container"><div style="position:relative;" class="doc-content"><div><h1 id="table" tabindex="-1">Table <a class="header-anchor vp-link" href="#table" aria-hidden="true">#</a></h1><p>Display multiple data with similar format. You can sort, filter, compare your data in a table.</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>This component requires the <code>&lt;client-only&gt;&lt;/client-only&gt;</code> wrap when used in SSR (eg: <a href="https://nuxt.com/v3" class="vp-link" target="_blank" rel="noopener noreferrer">Nuxt<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a>) and SSG (eg: <a href="https://vitepress.vuejs.org/" class="vp-link" target="_blank" rel="noopener noreferrer">VitePress<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a>).</p></div><h2 id="basic-table" tabindex="-1">Basic table <a class="header-anchor vp-link" href="#basic-table" aria-hidden="true">#</a></h2><p>Basic table is just for data display.</p><!----><h2 id="striped-table" tabindex="-1">Striped Table <a class="header-anchor vp-link" href="#striped-table" aria-hidden="true">#</a></h2><p>Striped table makes it easier to distinguish different rows.</p><!----><h2 id="table-with-border" tabindex="-1">Table with border <a class="header-anchor vp-link" href="#table-with-border" aria-hidden="true">#</a></h2><!----><h2 id="table-with-status" tabindex="-1">Table with status <a class="header-anchor vp-link" href="#table-with-status" aria-hidden="true">#</a></h2><p>You can highlight your table content to distinguish between &quot;success, information, warning, danger&quot; and other states.</p><!----><h2 id="table-with-show-overflow-tooltip" tabindex="-1">Table with show overflow tooltip <a class="header-anchor vp-link" href="#table-with-show-overflow-tooltip" aria-hidden="true">#</a></h2><p>When the content is too long, it will break into multiple lines, you can use <code>show-overflow-tooltip</code> to keep it in one line.</p><!----><h2 id="table-with-fixed-header" tabindex="-1">Table with fixed header <a class="header-anchor vp-link" href="#table-with-fixed-header" aria-hidden="true">#</a></h2><p>When there are too many rows, you can use a fixed header.</p><!----><h2 id="table-with-fixed-column" tabindex="-1">Table with fixed column <a class="header-anchor vp-link" href="#table-with-fixed-column" aria-hidden="true">#</a></h2><p>When there are too many columns, you can fix some of them.</p><!----><h2 id="table-with-fixed-columns-and-header" tabindex="-1">Table with fixed columns and header <a class="header-anchor vp-link" href="#table-with-fixed-columns-and-header" aria-hidden="true">#</a></h2><p>When you have huge chunks of data to put in a table, you can fix the header and columns at the same time.</p><!----><h2 id="fluid-height-table-with-fixed-header-and-columns" tabindex="-1">Fluid-height Table with fixed header (and columns) <a class="header-anchor vp-link" href="#fluid-height-table-with-fixed-header-and-columns" aria-hidden="true">#</a></h2><p>When the the data is dynamically changed, you might want the table to have a maximum height rather than a fixed height and to show the scroll bar if needed.</p><!----><h2 id="grouping-table-head" tabindex="-1">Grouping table head <a class="header-anchor vp-link" href="#grouping-table-head" aria-hidden="true">#</a></h2><p>When the data structure is complex, you can use group header to show the data hierarchy.</p><!----><h2 id="table-with-fixed-group-header" tabindex="-1">Table with fixed group header <a class="header-anchor vp-link" href="#table-with-fixed-group-header" aria-hidden="true">#</a></h2><p>fixed group head is supported</p><!----><h2 id="single-select" tabindex="-1">Single select <a class="header-anchor vp-link" href="#single-select" aria-hidden="true">#</a></h2><p>Single row selection is supported.</p><!----><h2 id="multiple-select" tabindex="-1">Multiple select <a class="header-anchor vp-link" href="#multiple-select" aria-hidden="true">#</a></h2><p>You can also select multiple rows.</p><!----><h2 id="sorting" tabindex="-1">Sorting <a class="header-anchor vp-link" href="#sorting" aria-hidden="true">#</a></h2><p>Sort the data to find or compare data quickly.</p><!----><h2 id="filter" tabindex="-1">Filter <a class="header-anchor vp-link" href="#filter" aria-hidden="true">#</a></h2><p>Filter the table to find desired data.</p><!----><h2 id="custom-column-template" tabindex="-1">Custom column template <a class="header-anchor vp-link" href="#custom-column-template" aria-hidden="true">#</a></h2><p>Customize table column so it can be integrated with other components.</p><!----><h2 id="table-with-custom-header" tabindex="-1">Table with custom header <a class="header-anchor vp-link" href="#table-with-custom-header" aria-hidden="true">#</a></h2><p>Customize table header so it can be even more customized.</p><!----><h2 id="expandable-row" tabindex="-1">Expandable row <a class="header-anchor vp-link" href="#expandable-row" aria-hidden="true">#</a></h2><p>When the row content is too long and you do not want to display the horizontal scroll bar, you can use the expandable row feature.</p><!----><h2 id="tree-data-and-lazy-mode" tabindex="-1">Tree data and lazy mode <a class="header-anchor vp-link" href="#tree-data-and-lazy-mode" aria-hidden="true">#</a></h2><!----><h2 id="summary-row" tabindex="-1">Summary row <a class="header-anchor vp-link" href="#summary-row" aria-hidden="true">#</a></h2><p>For table of numbers, you can add an extra row at the table footer displaying each column&#39;s sum.</p><!----><h2 id="rowspan-and-colspan" tabindex="-1">Rowspan and colspan <a class="header-anchor vp-link" href="#rowspan-and-colspan" aria-hidden="true">#</a></h2><p>Configuring rowspan and colspan allows you to merge cells</p><!----><h2 id="custom-index" tabindex="-1">Custom index <a class="header-anchor vp-link" href="#custom-index" aria-hidden="true">#</a></h2><p>You can customize row index in <code>type=index</code> columns.</p><!----><h2 id="table-layout" tabindex="-1">Table Layout <a class="header-anchor vp-link" href="#table-layout" aria-hidden="true">#</a></h2><p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout" class="vp-link" target="_blank" rel="noopener noreferrer">table-layout<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a> property sets the algorithm used to lay out table cells, rows, and columns.</p><!----><h2 id="table-api" tabindex="-1">Table API <a class="header-anchor vp-link" href="#table-api" aria-hidden="true">#</a></h2><h3 id="table-attributes" tabindex="-1">Table Attributes <a class="header-anchor vp-link" href="#table-attributes" aria-hidden="true">#</a></h3><div class="vp-table"><table><thead><tr><th>Name</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td>data</td><td>table data</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td><td>[]</td></tr><tr><td>height</td><td>table&#39;s height. By default it has an <code>auto</code> height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element&#39;s style.height, the height is affected by external styles</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span> / <span class="inline-flex items-center"><code class="api-typing mr-1">number</code><!----></span></td><td>—</td></tr><tr><td>max-height</td><td>table&#39;s max-height. The legal value is a number or the height in px</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span> / <span class="inline-flex items-center"><code class="api-typing mr-1">number</code><!----></span></td><td>—</td></tr><tr><td>stripe</td><td>whether Table is striped</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>false</td></tr><tr><td>border</td><td>whether Table has vertical border</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>false</td></tr><tr><td>size</td><td>size of Table</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">enum</code><!----></span></td><td>—</td></tr><tr><td>fit</td><td>whether width of column automatically fits its container</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>true</td></tr><tr><td>show-header</td><td>whether Table header is visible</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>true</td></tr><tr><td>highlight-current-row</td><td>whether current row is highlighted</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>false</td></tr><tr><td>current-row-key</td><td>key of current row, a set only prop</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span> / <span class="inline-flex items-center"><code class="api-typing mr-1">number</code><!----></span></td><td>—</td></tr><tr><td>row-class-name</td><td>function that returns custom class names for a row, or a string assigning class names for every row</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span> / <span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span></td><td>—</td></tr><tr><td>row-style</td><td>function that returns custom style for a row, or an object assigning custom style for every row</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span> / <span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td><td>—</td></tr><tr><td>cell-class-name</td><td>function that returns custom class names for a cell, or a string assigning class names for every cell</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span> / <span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span></td><td>—</td></tr><tr><td>cell-style</td><td>function that returns custom style for a cell, or an object assigning custom style for every cell</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span> / <span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td><td>—</td></tr><tr><td>header-row-class-name</td><td>function that returns custom class names for a row in table header, or a string assigning class names for every row in table header</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span> / <span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span></td><td>—</td></tr><tr><td>header-row-style</td><td>function that returns custom style for a row in table header, or an object assigning custom style for every row in table header</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span> / <span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td><td>—</td></tr><tr><td>header-cell-class-name</td><td>function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span> / <span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span></td><td>—</td></tr><tr><td>header-cell-style</td><td>function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span> / <span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td><td>—</td></tr><tr><td>row-key</td><td>key of row data, used for optimizing rendering. Required if <code>reserve-selection</code> is on or display tree data. When its type is String, multi-level access is supported, e.g. <code>user.info.id</code>, but <code>user.info[0].id</code> is not supported, in which case <code>Function</code> should be used</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">function</code><!----></span> / <span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span></td><td>—</td></tr><tr><td>empty-text</td><td>displayed text when data is empty. You can customize this area with <code>#empty</code></td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span></td><td>No Data</td></tr><tr><td>default-expand-all</td><td>whether expand all rows by default, works when the table has a column type=&quot;expand&quot; or contains tree structure data</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>false</td></tr><tr><td>expand-row-keys</td><td>set expanded rows by this prop, prop&#39;s value is the keys of expand rows, you should set row-key before using this prop</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td><td>—</td></tr><tr><td>default-sort</td><td>set the default sort column and order. property <code>prop</code> is used to set default sort column, property <code>order</code> is used to set default sort order</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td><td>if <code>prop</code> is set, and <code>order</code> is not set, then <code>order</code> is default to ascending</td></tr><tr><td>tooltip-effect</td><td>the <code>effect</code> of the overflow tooltip</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">enum</code><!----></span></td><td>dark</td></tr><tr><td>tooltip-options <span class="vp-tag">2.2.28</span></td><td>the options for the overflow tooltip, <a href="./tooltip.html#attributes" class="vp-link">see the following tooltip component</a></td><td><span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td><td><span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td></tr><tr><td>show-summary</td><td>whether to display a summary row</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>false</td></tr><tr><td>sum-text</td><td>displayed text for the first column of summary row</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span></td><td>Sum</td></tr><tr><td>summary-method</td><td>custom summary method</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td><td>—</td></tr><tr><td>span-method</td><td>method that returns rowspan and colspan</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td><td>—</td></tr><tr><td>select-on-indeterminate</td><td>controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>true</td></tr><tr><td>indent</td><td>horizontal indentation of tree data</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">number</code><!----></span></td><td>16</td></tr><tr><td>lazy</td><td>whether to lazy loading data</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>false</td></tr><tr><td>load</td><td>method for loading child row data, only works when <code>lazy</code> is true</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td><td>—</td></tr><tr><td>tree-props</td><td>configuration for rendering nested data</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td><td><span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td></tr><tr><td>table-layout</td><td>sets the algorithm used to lay out table cells, rows, and columns</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">enum</code><!----></span></td><td>fixed</td></tr><tr><td>scrollbar-always-on</td><td>always show scrollbar</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>false</td></tr><tr><td>show-overflow-tooltip</td><td>whether to hide extra content and show them in a tooltip when hovering on the <a href="http://cell.It" class="vp-link" target="_blank" rel="noopener noreferrer">cell.It<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a> will affect all the table columns, refer to table <a href="#table-attributes" class="vp-link">tooltip-options</a></td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span> / <a href="#table-attributes" class="vp-link"><code>object</code></a> <span class="vp-tag">2.3.7</span></td><td>—</td></tr><tr><td>flexible <span class="vp-tag">2.2.1</span></td><td>ensure main axis minimum-size doesn&#39;t follow the content</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>false</td></tr></tbody></table></div><h3 id="table-events" tabindex="-1">Table Events <a class="header-anchor vp-link" href="#table-events" aria-hidden="true">#</a></h3><div class="vp-table"><table><thead><tr><th>Name</th><th>Description</th><th>Type</th></tr></thead><tbody><tr><td>select</td><td>triggers when user clicks the checkbox in a row</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>select-all</td><td>triggers when user clicks the checkbox in table header</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>selection-change</td><td>triggers when selection changes</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>cell-mouse-enter</td><td>triggers when hovering into a cell</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>cell-mouse-leave</td><td>triggers when hovering out of a cell</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>cell-click</td><td>triggers when clicking a cell</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>cell-dblclick</td><td>triggers when double clicking a cell</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>cell-contextmenu</td><td>triggers when user right clicks on a cell</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>row-click</td><td>triggers when clicking a row</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>row-contextmenu</td><td>triggers when user right clicks on a row</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>row-dblclick</td><td>triggers when double clicking a row</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>header-click</td><td>triggers when clicking a column header</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>header-contextmenu</td><td>triggers when user right clicks on a column header</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>sort-change</td><td>triggers when Table&#39;s sorting changes</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>filter-change</td><td>column&#39;s key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>current-change</td><td>triggers when current row changes</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>header-dragend</td><td>triggers after changing a column&#39;s width by dragging the column header&#39;s border</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>expand-change</td><td>triggers when user expands or collapses a row (for expandable table, second param is expandedRows; for tree Table, second param is expanded)</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr></tbody></table></div><h3 id="table-slots" tabindex="-1">Table Slots <a class="header-anchor vp-link" href="#table-slots" aria-hidden="true">#</a></h3><div class="vp-table"><table><thead><tr><th>Name</th><th>Description</th><th>Subtags</th></tr></thead><tbody><tr><td>default</td><td>customize default content</td><td>Table-column</td></tr><tr><td>append</td><td>Contents to be inserted after the last row. You may need this slot if you want to implement infinite scroll for the table. This slot will be displayed above the summary row if there is one.</td><td>—</td></tr><tr><td>empty</td><td>you can customize content when data is empty.</td><td>—</td></tr></tbody></table></div><h3 id="table-exposes" tabindex="-1">Table Exposes <a class="header-anchor vp-link" href="#table-exposes" aria-hidden="true">#</a></h3><div class="vp-table"><table><thead><tr><th>Method</th><th>Description</th><th>Type</th></tr></thead><tbody><tr><td>clearSelection</td><td>used in multiple selection Table, clear user selection</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>getSelectionRows</td><td>returns the currently selected rows</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>toggleRowSelection</td><td>used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>toggleAllSelection</td><td>used in multiple selection Table, toggle select all and deselect all</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>toggleRowExpansion</td><td>used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>setCurrentRow</td><td>used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>clearSort</td><td>clear sorting, restore data to the original order</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>clearFilter</td><td>clear filters of the columns whose <code>columnKey</code> are passed in. If no params, clear all filters</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>doLayout</td><td>refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>sort</td><td>sort Table manually. Property <code>prop</code> is used to set sort column, property <code>order</code> is used to set sort order</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>scrollTo</td><td>scrolls to a particular set of coordinates</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>setScrollTop</td><td>set vertical scroll position</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>setScrollLeft</td><td>set horizontal scroll position</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr><tr><td>columns <span class="vp-tag">2.7.6</span></td><td>Get table columns context.</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">array</code><!----></span></td></tr></tbody></table></div><h2 id="table-column-api" tabindex="-1">Table-column API <a class="header-anchor vp-link" href="#table-column-api" aria-hidden="true">#</a></h2><h3 id="table-column-attributes" tabindex="-1">Table-column Attributes <a class="header-anchor vp-link" href="#table-column-attributes" aria-hidden="true">#</a></h3><div class="vp-table"><table><thead><tr><th>Name</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td>type</td><td>type of the column. If set to <code>selection</code>, the column will display checkbox. If set to <code>index</code>, the column will display index of the row (staring from 1). If set to <code>expand</code>, the column will display expand icon</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">enum</code><!----></span></td><td>default</td></tr><tr><td>index</td><td>customize indices for each row, works on columns with <code>type=index</code></td><td><span class="inline-flex items-center"><code class="api-typing mr-1">number</code><!----></span> / <span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td><td>—</td></tr><tr><td>label</td><td>column label</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span></td><td>—</td></tr><tr><td>column-key</td><td>column&#39;s key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span></td><td>—</td></tr><tr><td>prop</td><td>field name. You can also use its alias: <code>property</code></td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span></td><td>—</td></tr><tr><td>width</td><td>column width</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span> / <span class="inline-flex items-center"><code class="api-typing mr-1">number</code><!----></span></td><td>&#39;&#39;</td></tr><tr><td>min-width</td><td>column minimum width. Columns with <code>width</code> has a fixed width, while columns with <code>min-width</code> has a width that is distributed in proportion</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span> / <span class="inline-flex items-center"><code class="api-typing mr-1">number</code><!----></span></td><td>&#39;&#39;</td></tr><tr><td>fixed</td><td>whether column is fixed at left / right. Will be fixed at left if <code>true</code></td><td><span class="inline-flex items-center"><code class="api-typing mr-1">enum</code><!----></span> / <span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>false</td></tr><tr><td>render-header</td><td>render function for table header of this column</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td><td>—</td></tr><tr><td>sortable</td><td>whether column can be sorted. Remote sorting can be done by setting this attribute to &#39;custom&#39; and listening to the <code>sort-change</code> event of Table</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span> / <span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span></td><td>false</td></tr><tr><td>sort-method</td><td>sorting method, works when <code>sortable</code> is <code>true</code>. Should return a number, just like Array.sort</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td><td>—</td></tr><tr><td>sort-by</td><td>specify which property to sort by, works when <code>sortable</code> is <code>true</code> and <code>sort-method</code> is <code>undefined</code>. If set to an Array, the column will sequentially sort by the next property if the previous one is equal</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span> / <span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span> / <span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td><td>—</td></tr><tr><td>sort-orders</td><td>the order of the sorting strategies used when sorting the data, works when <code>sortable</code> is <code>true</code>. Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td><td>[&#39;ascending&#39;, &#39;descending&#39;, null]</td></tr><tr><td>resizable</td><td>whether column width can be resized, works when <code>border</code> of <code>el-table</code> is <code>true</code></td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>true</td></tr><tr><td>formatter</td><td>function that formats cell content</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">function</code><!----></span></td><td>—</td></tr><tr><td>show-overflow-tooltip</td><td>whether to hide extra content and show them in a tooltip when hovering on the cell</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span> / <a href="#table-attributes" class="vp-link"><code>object</code></a> <span class="vp-tag">2.2.28</span></td><td>undefined</td></tr><tr><td>align</td><td>alignment</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">enum</code><!----></span></td><td>left</td></tr><tr><td>header-align</td><td>alignment of the table header. If omitted, the value of the above <code>align</code> attribute will be applied</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">enum</code><!----></span></td><td>left</td></tr><tr><td>class-name</td><td>class name of cells in the column</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span></td><td>—</td></tr><tr><td>label-class-name</td><td>class name of the label of this column</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span></td><td>—</td></tr><tr><td>selectable</td><td>function that determines if a certain row can be selected, works when <code>type</code> is &#39;selection&#39;</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td><td>—</td></tr><tr><td>reserve-selection</td><td>whether to reserve selection after data refreshing, works when <code>type</code> is &#39;selection&#39;. Note that <code>row-key</code> is required for this to work</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>false</td></tr><tr><td>filters</td><td>an array of data filtering options. For each element in this array, <code>text</code> and <code>value</code> are required</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td><td>—</td></tr><tr><td>filter-placement</td><td>placement for the filter dropdown</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">enum</code><!----></span></td><td>—</td></tr><tr><td>filter-class-name <span class="vp-tag">2.5.0</span></td><td>className for the filter dropdown</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span></td><td>—</td></tr><tr><td>filter-multiple</td><td>whether data filtering supports multiple options</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>true</td></tr><tr><td>filter-method</td><td>data filtering method. If <code>filter-multiple</code> is on, this method will be called multiple times for each row, and a row will display if one of the calls returns <code>true</code></td><td><span class="inline-flex items-center"><code class="api-typing mr-1">function</code><!----></span></td><td>—</td></tr><tr><td>filtered-value</td><td>filter value for selected data, might be useful when table header is rendered with <code>render-header</code></td><td><span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td><td>—</td></tr></tbody></table></div><h3 id="table-column-slots" tabindex="-1">Table-column Slots <a class="header-anchor vp-link" href="#table-column-slots" aria-hidden="true">#</a></h3><div class="vp-table"><table><thead><tr><th>Name</th><th>Description</th><th>Type</th></tr></thead><tbody><tr><td>default</td><td>Custom content for table columns</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td></tr><tr><td>header</td><td>Custom content for table header</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">object</code><!----></span></td></tr></tbody></table></div><h2 id="type-declarations" tabindex="-1">Type Declarations <a class="header-anchor vp-link" href="#type-declarations" aria-hidden="true">#</a></h2><details><summary>Show declarations</summary><div class="language-ts"><pre><code><span class="token keyword">interface</span> <span class="token class-name">Sort</span> <span class="token punctuation">{</span>
  prop<span class="token operator">:</span> <span class="token builtin">string</span>
  order<span class="token operator">:</span> <span class="token string">&#39;ascending&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;descending&#39;</span>
  init<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">any</span>
  silent<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">any</span>
<span class="token punctuation">}</span>

<span class="token keyword">interface</span> <span class="token class-name">TreeNode</span> <span class="token punctuation">{</span>
  expanded<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
  loading<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
  noLazyChildren<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
  indent<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span>
  level<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span>
  display<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
<span class="token punctuation">}</span>
</code></pre></div></details><h2 id="faq" tabindex="-1">FAQ <a class="header-anchor vp-link" href="#faq" aria-hidden="true">#</a></h2><h4 id="how-to-use-image-preview-in-the-table" tabindex="-1">How to use image preview in the table? <a class="header-anchor vp-link" href="#how-to-use-image-preview-in-the-table" aria-hidden="true">#</a></h4><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Thumbnail<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>180<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#default</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-image</span> <span class="token attr-name">:preview-src-list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>srcList<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table-column</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>PS: since the fixed column is implement by sticky, when you have fixed columns in table, please add the <code>preview-teleported</code> attribute in image</p><h4 id="why-column-is-not-rendered-when-use-dom-templates" tabindex="-1">Why column is not rendered when use DOM templates? <a class="header-anchor vp-link" href="#why-column-is-not-rendered-when-use-dom-templates" aria-hidden="true">#</a></h4><p>Typical issue: <a href="https://github.com/element-plus/element-plus/issues/5046" class="vp-link" target="_blank" rel="noopener noreferrer">#5046<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a> <a href="https://github.com/element-plus/element-plus/issues/5862" class="vp-link" target="_blank" rel="noopener noreferrer">#5862<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a> <a href="https://github.com/element-plus/element-plus/issues/6919" class="vp-link" target="_blank" rel="noopener noreferrer">#6919<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a></p><p>This is because the HTML spec only allows a few specific elements to omit closing tags, the most common being <code>&lt;input&gt;</code> and <code>&lt;img&gt;</code>. For all other elements, if you omit the closing tag, the native HTML parser will think you never terminated the opening tag</p><p>For more details please refer to <a href="https://vuejs.org/guide/essentials/component-basics.html#self-closing-tags" class="vp-link" target="_blank" rel="noopener noreferrer">vue docs<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a></p><h2 id="source" tabindex="-1">Source <a class="header-anchor vp-link" href="#source" aria-hidden="true">#</a></h2><p><a href="https://github.com/element-plus/element-plus/tree/dev/packages/components/table" class="vp-link" target="_blank" rel="noopener noreferrer">Component<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a> • <a href="https://github.com/element-plus/element-plus/blob/dev/docs/en-US/component/table.md" class="vp-link" target="_blank" rel="noopener noreferrer">Docs<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a></p><h2 id="contributors" tabindex="-1">Contributors <a class="header-anchor vp-link" href="#contributors" aria-hidden="true">#</a></h2><div class="mb-4" data-v-2c2cd08f><div class="flex flex-wrap gap-4 pt-2" data-v-2c2cd08f><!--[--><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/msidolphin" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/26672484?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> msidolphin<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/sxzz" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/6481596?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> 三咲智子<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/YunYouJun" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/25154432?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> 云游君<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/jw-foss" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/15975785?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Jeremy<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/btea" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/24516654?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> btea<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/tolking" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/23313167?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> qiang<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/xiaoxian521" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/44761321?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> xiaoming<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/chenxch" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/23251408?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Xc<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/kooriookami" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/38392315?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> kooriookami<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/plainheart" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/26999792?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Zhongxiang Wang<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/holazz" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/23100055?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> zz<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/Tsong-LC" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/50739490?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> LIUCHAO<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/warmthsea" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/45450994?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> sea<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/Liao-js" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/43257608?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Liao-js<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/FrontEndDog" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/46493087?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> 一只前端汪<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/xingyixiang" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/24290011?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> xingyixiang<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/MrWeilian" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/30046649?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> 井柏然<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/init-qy" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/59350883?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> init-qy<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/wiidede" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/25472916?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> 小的的<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/cokemine" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/45122329?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> 神楽坂みずき<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/adaex" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/29560987?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Aex<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/dowinweb" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/17523626?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Wayne<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/wonderl17" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/31885971?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> wonderl17<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/kaine0923" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/121680374?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Kaine<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/tinyfind" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/67093787?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> tinyfind<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/qq282126990" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/26755049?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> 热爱vue的小菜鸟<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/gjfei" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/33827314?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> jarven<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/CarterLi" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/6134068?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Carter Li<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/iamkun" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/17680888?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> iamkun<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/justwiner" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/30335393?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> justwiner<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/emojiiii" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/30518686?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> C.Y.Kun<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/buqiyuan" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/39730999?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> bqy_fe<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/Alanscut" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/21104054?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Alan Wang<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/electroluxcode" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/59329360?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Electrolux<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/wzc520pyfm" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/69044080?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> wzc520pyfm<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/FrankFang" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/839559?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Frank Fang<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/Karolis-Stoncius" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/108655466?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Karolis_Stoncius_Sneakybox<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/LiZheGuang" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/16920092?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> ZheGuangLi<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/lxy030988" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/29250746?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> lxy030988<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/yuyinws" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/38490578?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> yuyin<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/mdoi2" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/6340506?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Masanori Doizaki<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/makedopamine" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/93767616?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> dopamine<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/Mario34" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/42017165?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Mario34<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/jaa134" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/13410410?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Jacob Alspaw<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/ivan0525" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/42532333?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> ivan0525<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/bartoszrudzinski" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/23010875?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> bartoszrudzinski<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/Cenavy1019" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/20083373?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> hankin.dream<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/faga295" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/87003751?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> faga<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/Simon-He95" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/57086651?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Simon He<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/yangliguo7" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/46318880?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> YangLGggggggggg<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/jianjunyuu" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/49601167?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Jianjun Yu<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/xiaochenchen-igg-com" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/169252980?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Xc<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/k713927" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/44334858?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> 沐林森13<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/josonho" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/26833520?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> joson<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/purepear" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/144010?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Delyan Haralanov<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/hminghe" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/1744129?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> hminghe<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/kakigakki" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/45614103?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> KAKI<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/wjp980108" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/54931083?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> WuJianPeng<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/StephenKe" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/22910740?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Stephen.K<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/zhengbangbo" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/18254135?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Zheng Bang-Bo<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/liunnn1994" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/23442840?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> liu<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/Chris-Kin" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/10802869?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> on the field of hope<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/Ryan2128" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/33176053?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Ryan2128<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/zazzaz" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/10731096?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> zazzaz<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/Hades-li" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/12124478?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Hades-li<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/xxholly32" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/6063358?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> xx<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/acyza" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/101238421?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> acyza<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/liuyutao" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/2098770?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> liuyutao<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/loosheng" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/30114549?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> LooSheng<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/zyyv" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/42139754?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Chris<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/ryuhangyeong" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/27342882?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> 류한경<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/nieyuyao" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/17698194?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Yuyao Nie<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/zhangshichun" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/15374687?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> 张仕春<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/deepthan" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/22695767?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> deepthan<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/imswk" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/23303044?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> SongWuKong<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/HaitaoWang555" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/29143658?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> wanghaitao<!--]--><!----></a></div><!--]--></div></div></div></div><footer class="page-footer" data-v-3e2f3e7f><div class="edit" data-v-3e2f3e7f><div class="edit-link" data-v-3e2f3e7f data-v-7d4aa2c8><a class="link text-sm" href="https://github.com/element-plus/element-plus/edit/dev/docs/en-US/component/table.md" target="_blank" rel="noopener noreferrer" data-v-7d4aa2c8>Edit this page on GitHub <i class="el-icon" style="font-size:16px;vertical-align:text-top;line-height:24px;" data-v-7d4aa2c8><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-7d4aa2c8><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg><!--]--></i></a></div></div></footer><div class="next-and-prev-link" data-v-8ad25866><div class="container" data-v-8ad25866><div class="prev" data-v-8ad25866><a class="link" href="/en-US/component/skeleton" data-v-8ad25866><i class="el-icon mr-1" style="" data-v-8ad25866><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024" data-v-8ad25866><path fill="currentColor" d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"></path></svg><!--]--></i><span class="text" data-v-8ad25866>Skeleton</span></a></div><div class="next" data-v-8ad25866><a class="link" href="/en-US/component/table-v2" data-v-8ad25866><span class="text" data-v-8ad25866>Virtualized Table</span><i class="el-icon ml-1" style="" data-v-8ad25866><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024" data-v-8ad25866><path fill="currentColor" d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path></svg><!--]--></i></a></div></div></div></div><aside class="toc-wrapper" data-v-6f13b908><nav class="toc-content" data-v-6f13b908><h3 class="toc-content__heading" data-v-6f13b908>Contents</h3><!----><p class="text-14px font-300 color-$text-color-secondary" data-v-6f13b908>Sponsored by</p><div class="join sponsors-button mt-4 w-100%" data-v-6f13b908><!--[--><a href="mailto:element-plus@outlook.com" target="_blank" class="el-tooltip__trigger"><button ariadisabled="false" type="button" class="el-button" style="overflow:hidden;"><!--v-if--><span class=""><!--[-->Become a Sponsor!<!--]--></span></button></a><!--teleport start--><!--teleport end--><!--]--></div><div class="right-big" data-v-6f13b908 data-v-1a999eaa><!--[--><a href="http://github.crmeb.net/u/Element?from=element-plus" title="CRMEB - 高品质开源商城系统 累计服务40W+开发者" target="_blank" data-v-1a999eaa><div class="flex bg-#F9F9F9 h-64px rd-4px justify-center items-center" data-v-1a999eaa><div class="h-36px" data-v-1a999eaa><img class="rd-4px h-full" src="/images/sponsors/CRMEB-l.png" alt="CRMEB" data-v-1a999eaa></div></div></a><!--]--></div><div class="flex flex-wrap justify-between right-small" data-v-6f13b908 data-v-1e0a70fc><!--[--><!--[--><a href="https://doc.buildadmin.com/?from=element-plus" title="BuildAdmin - Vue3企业级开源后台管理系统" target="_blank" data-v-1e0a70fc><div class="flex m-b-4px bg-#F9F9F9 rd-0px h-42px w-95px justify-center items-center" data-v-1e0a70fc><img src="/images/sponsors/buildadmin-l.png" alt="BuildAdmin" data-v-1e0a70fc></div></a><!--]--><!--[--><a href="http://www.i-renderer.love/home/index" title="百搭云 - 快速且优雅的低代码平台" target="_blank" data-v-1e0a70fc><div class="flex m-b-4px bg-#F9F9F9 rd-0px h-42px w-95px justify-center items-center" data-v-1e0a70fc><img src="/images/sponsors/baidayun.png" alt="百搭云" data-v-1e0a70fc></div></a><!--]--><!--[--><a href="https://bit.dev/?from=element-ui" title="bit - Share Code" target="_blank" data-v-1e0a70fc><div class="flex m-b-4px bg-#F9F9F9 rd-0px h-42px w-95px justify-center items-center" data-v-1e0a70fc><img src="/images/bit-l.png" alt="bit" data-v-1e0a70fc></div></a><!--]--><!--[--><div class="flex bg-#F9F9F9 rd-0px h-42px w-95px justify-center items-center" data-v-1e0a70fc><div class="color-#ddd text-13px cursor-default" data-v-1e0a70fc>Your logo</div></div><!--]--><!--]--></div><div class="right-rich" data-v-6f13b908 data-v-84253628><!--[--><!--]--></div></nav></aside></div><footer class="footer"><div class="footer-main"><h4>Links</h4><a href="https://github.com/element-plus/element-plus" class="footer-main-link" target="_blank">GitHub</a><a href="https://cn.element-plus.org/zh-CN/" class="footer-main-link" target="_blank">China Mirror 🇨🇳</a><a href="https://github.com/element-plus/element-plus/releases" class="footer-main-link" target="_blank">Changelog</a><a href="https://element.eleme.io/" class="footer-main-link" target="_blank">Element UI for Vue 2</a></div><div class="footer-main"><h4>Community</h4><a href="https://discord.com/invite/gXK9XNzW3X" class="footer-main-link" target="_blank">Discord</a><a href="https://github.com/element-plus/element-plus/issues" class="footer-main-link" target="_blank">Feedback</a><a href="https://github.com/element-plus/element-plus/blob/dev/.github/CONTRIBUTING.en-US.md" class="footer-main-link" target="_blank">Contribution</a><a href="https://segmentfault.com/t/element-plus" class="footer-main-link" target="_blank">SegmentFault</a></div></footer></main><!----></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"en-us_component_affix.md\":\"ff7dffa4\",\"en-us_component_alert.md\":\"cd5a1e5a\",\"en-us_component_anchor.md\":\"9a48cc9f\",\"en-us_component_autocomplete.md\":\"0f589547\",\"en-us_component_avatar.md\":\"02c0aba6\",\"en-us_component_backtop.md\":\"7b0c1932\",\"en-us_component_badge.md\":\"002e14a4\",\"en-us_component_border.md\":\"1ca6f965\",\"en-us_component_breadcrumb.md\":\"2ef63731\",\"en-us_component_button.md\":\"1063d204\",\"en-us_component_calendar.md\":\"eb9d1675\",\"en-us_component_card.md\":\"39e55f42\",\"en-us_component_carousel.md\":\"32115767\",\"en-us_component_cascader.md\":\"bf8dbc75\",\"en-us_component_checkbox.md\":\"98dc0f53\",\"en-us_component_collapse.md\":\"67a5c313\",\"en-us_component_color-picker.md\":\"50cd4caa\",\"en-us_component_color.md\":\"29417b31\",\"en-us_component_config-provider.md\":\"3463b447\",\"en-us_component_container.md\":\"85e4bdf3\",\"en-us_component_date-picker.md\":\"68c06f9e\",\"en-us_component_datetime-picker.md\":\"b999a872\",\"en-us_component_descriptions.md\":\"339dc63b\",\"en-us_component_dialog.md\":\"2cf8cf86\",\"en-us_component_divider.md\":\"421eb5f2\",\"en-us_component_drawer.md\":\"024b53e9\",\"en-us_component_dropdown.md\":\"7ac24bed\",\"en-us_component_empty.md\":\"29b5b47b\",\"en-us_component_form.md\":\"7458dbb1\",\"en-us_component_icon.md\":\"3426aa0f\",\"en-us_component_image.md\":\"ac3532a8\",\"en-us_component_infinite-scroll.md\":\"4c6f7159\",\"en-us_component_input-number.md\":\"a5c4cb11\",\"en-us_component_input.md\":\"c16e2da7\",\"en-us_component_layout.md\":\"2b2af71d\",\"en-us_component_link.md\":\"d30a5d74\",\"en-us_component_loading.md\":\"c6e5ea76\",\"en-us_component_menu.md\":\"e0e7d7ac\",\"en-us_component_message-box.md\":\"fc32bd92\",\"en-us_component_message.md\":\"cd41cb05\",\"en-us_component_notification.md\":\"56a6f299\",\"en-us_component_overview.md\":\"110e854b\",\"en-us_component_page-header.md\":\"38a29a2d\",\"en-us_component_pagination.md\":\"fe79df34\",\"en-us_component_popconfirm.md\":\"503fa4ae\",\"en-us_component_popover.md\":\"e14a3c24\",\"en-us_component_progress.md\":\"3b77a4ca\",\"en-us_component_radio.md\":\"95514d81\",\"en-us_component_rate.md\":\"3ed19909\",\"en-us_component_result.md\":\"081f424e\",\"en-us_component_scrollbar.md\":\"9562ac05\",\"en-us_component_segmented.md\":\"43777257\",\"en-us_component_select-v2.md\":\"8273ca64\",\"en-us_component_select.md\":\"6dfded09\",\"en-us_component_skeleton.md\":\"e5852963\",\"en-us_component_slider.md\":\"16325e17\",\"en-us_component_space.md\":\"3f2861d9\",\"en-us_component_statistic.md\":\"2a66f18b\",\"en-us_component_steps.md\":\"c0c48d3f\",\"en-us_component_switch.md\":\"bc045b26\",\"en-us_component_table-v2.md\":\"2105af2e\",\"en-us_component_table.md\":\"f8c35834\",\"en-us_component_tabs.md\":\"f908f1e5\",\"en-us_component_tag.md\":\"77cd984c\",\"en-us_component_text.md\":\"1580f3e6\",\"en-us_component_time-picker.md\":\"84d6f56c\",\"en-us_component_time-select.md\":\"be608e21\",\"en-us_component_timeline.md\":\"186bed11\",\"en-us_component_tooltip-v2.md\":\"a6daced0\",\"en-us_component_tooltip.md\":\"231fba09\",\"en-us_component_tour.md\":\"837136bc\",\"en-us_component_transfer.md\":\"91a8f888\",\"en-us_component_tree-select.md\":\"5479b050\",\"en-us_component_tree-v2.md\":\"9dc2154b\",\"en-us_component_tree.md\":\"955130e4\",\"en-us_component_typography.md\":\"daf0375f\",\"en-us_component_upload.md\":\"d9accc95\",\"en-us_component_watermark.md\":\"443e8fcb\",\"en-us_guide_changelog.md\":\"3c084145\",\"en-us_guide_commit-examples.md\":\"cc45ed9c\",\"en-us_guide_dark-mode.md\":\"9256892d\",\"en-us_guide_design.md\":\"eac1a1f4\",\"en-us_guide_dev-faq.md\":\"cf746748\",\"en-us_guide_dev-guide.md\":\"d06336e2\",\"en-us_guide_i18n.md\":\"bd361557\",\"en-us_guide_installation.md\":\"85f92b17\",\"en-us_guide_migration.md\":\"0c9aab31\",\"en-us_guide_namespace.md\":\"6affb523\",\"en-us_guide_nav.md\":\"725829ca\",\"en-us_guide_quickstart.md\":\"27523655\",\"en-us_guide_ssr.md\":\"44fd7343\",\"en-us_guide_theming.md\":\"ae3aa2cd\",\"en-us_guide_transitions.md\":\"270de32e\",\"en-us_guide_translation.md\":\"eaabac54\",\"en-us_index.md\":\"2d298cdd\",\"en-us_resource_index.md\":\"34f01ea5\",\"es-es_component_affix.md\":\"6a1bdcbe\",\"es-es_component_alert.md\":\"aa7f77f7\",\"es-es_component_anchor.md\":\"763d2056\",\"es-es_component_autocomplete.md\":\"c422535c\",\"es-es_component_avatar.md\":\"391d791e\",\"es-es_component_backtop.md\":\"97c778cd\",\"es-es_component_badge.md\":\"d4198a37\",\"es-es_component_border.md\":\"c4431903\",\"es-es_component_breadcrumb.md\":\"d8545b03\",\"es-es_component_button.md\":\"e539188f\",\"es-es_component_calendar.md\":\"f682be1c\",\"es-es_component_card.md\":\"4d07a461\",\"es-es_component_carousel.md\":\"5f248bd0\",\"es-es_component_cascader.md\":\"f1da98ff\",\"es-es_component_checkbox.md\":\"e9665537\",\"es-es_component_collapse.md\":\"63f23fe8\",\"es-es_component_color-picker.md\":\"35223bc5\",\"es-es_component_color.md\":\"ecf66faa\",\"es-es_component_config-provider.md\":\"62ac5005\",\"es-es_component_container.md\":\"5844a08e\",\"es-es_component_date-picker.md\":\"a8755dbd\",\"es-es_component_datetime-picker.md\":\"445a7fe9\",\"es-es_component_descriptions.md\":\"7a88f91a\",\"es-es_component_dialog.md\":\"dcf50de9\",\"es-es_component_divider.md\":\"6f5b07f5\",\"es-es_component_drawer.md\":\"140c918c\",\"es-es_component_dropdown.md\":\"bcce96bc\",\"es-es_component_empty.md\":\"ccd86c17\",\"es-es_component_form.md\":\"f61ce21a\",\"es-es_component_icon.md\":\"50ac8e2d\",\"es-es_component_image.md\":\"8df18281\",\"es-es_component_infinite-scroll.md\":\"4419ba97\",\"es-es_component_input-number.md\":\"f8e08c67\",\"es-es_component_input.md\":\"c22c21f5\",\"es-es_component_layout.md\":\"787b2ad6\",\"es-es_component_link.md\":\"a79dfebf\",\"es-es_component_loading.md\":\"ae2cc3a8\",\"es-es_component_menu.md\":\"0adc6293\",\"es-es_component_message-box.md\":\"285f035c\",\"es-es_component_message.md\":\"b523dd42\",\"es-es_component_notification.md\":\"a0c9ea84\",\"es-es_component_overview.md\":\"5c7beefe\",\"es-es_component_page-header.md\":\"fbdbe268\",\"es-es_component_pagination.md\":\"6d21ed8c\",\"es-es_component_popconfirm.md\":\"944cf7f2\",\"es-es_component_popover.md\":\"c5c82a9d\",\"es-es_component_progress.md\":\"09e7e5fa\",\"es-es_component_radio.md\":\"7e9e6292\",\"es-es_component_rate.md\":\"8b333a70\",\"es-es_component_result.md\":\"403b624b\",\"es-es_component_scrollbar.md\":\"b9593bab\",\"es-es_component_segmented.md\":\"64c094d9\",\"es-es_component_select-v2.md\":\"95c9a85e\",\"es-es_component_select.md\":\"692b62a4\",\"es-es_component_skeleton.md\":\"0e6b07c4\",\"es-es_component_slider.md\":\"8e33f911\",\"es-es_component_space.md\":\"1b2a1f23\",\"es-es_component_statistic.md\":\"152a0721\",\"es-es_component_steps.md\":\"2d5805b7\",\"es-es_component_switch.md\":\"d44665e8\",\"es-es_component_table-v2.md\":\"84df4bd5\",\"es-es_component_table.md\":\"18789f35\",\"es-es_component_tabs.md\":\"d72771ad\",\"es-es_component_tag.md\":\"43e81918\",\"es-es_component_text.md\":\"1fcfb5cb\",\"es-es_component_time-picker.md\":\"bf4c067e\",\"es-es_component_time-select.md\":\"92f79417\",\"es-es_component_timeline.md\":\"4c2ff30c\",\"es-es_component_tooltip-v2.md\":\"8b8acbad\",\"es-es_component_tooltip.md\":\"4991646a\",\"es-es_component_tour.md\":\"11bc9eff\",\"es-es_component_transfer.md\":\"e8315055\",\"es-es_component_tree-select.md\":\"8481ec73\",\"es-es_component_tree-v2.md\":\"1f8e11fe\",\"es-es_component_tree.md\":\"13b0bb92\",\"es-es_component_typography.md\":\"9270c5de\",\"es-es_component_upload.md\":\"574f8475\",\"es-es_component_watermark.md\":\"5430e1d8\",\"es-es_guide_changelog.md\":\"1a5b87b0\",\"es-es_guide_commit-examples.md\":\"e6a58951\",\"es-es_guide_dark-mode.md\":\"85f904cf\",\"es-es_guide_design.md\":\"dd162f49\",\"es-es_guide_dev-faq.md\":\"7c4ae8da\",\"es-es_guide_dev-guide.md\":\"3ae1c952\",\"es-es_guide_i18n.md\":\"2118baa5\",\"es-es_guide_installation.md\":\"95803516\",\"es-es_guide_migration.md\":\"3f132e7e\",\"es-es_guide_namespace.md\":\"9856f155\",\"es-es_guide_nav.md\":\"63349cda\",\"es-es_guide_quickstart.md\":\"b1ad1aef\",\"es-es_guide_ssr.md\":\"791df483\",\"es-es_guide_theming.md\":\"97ccf28e\",\"es-es_guide_transitions.md\":\"29cf69a4\",\"es-es_guide_translation.md\":\"5bcefea4\",\"es-es_index.md\":\"1c9a711f\",\"es-es_resource_index.md\":\"f1abbb68\",\"index.md\":\"fe916efd\",\"zh-cn_component_affix.md\":\"cf647355\",\"zh-cn_component_alert.md\":\"eca392e8\",\"zh-cn_component_anchor.md\":\"7a786896\",\"zh-cn_component_autocomplete.md\":\"0fde91c7\",\"zh-cn_component_avatar.md\":\"ba24b56b\",\"zh-cn_component_backtop.md\":\"460d34db\",\"zh-cn_component_badge.md\":\"681178b5\",\"zh-cn_component_border.md\":\"87fc466a\",\"zh-cn_component_breadcrumb.md\":\"535bd42c\",\"zh-cn_component_button.md\":\"4128e583\",\"zh-cn_component_calendar.md\":\"d680314d\",\"zh-cn_component_card.md\":\"0f0f5afe\",\"zh-cn_component_carousel.md\":\"f902fc9f\",\"zh-cn_component_cascader.md\":\"c569aa5b\",\"zh-cn_component_checkbox.md\":\"54316312\",\"zh-cn_component_collapse.md\":\"26965384\",\"zh-cn_component_color-picker.md\":\"5f013e2e\",\"zh-cn_component_color.md\":\"b37f2def\",\"zh-cn_component_config-provider.md\":\"7e48316b\",\"zh-cn_component_container.md\":\"43636a70\",\"zh-cn_component_date-picker.md\":\"0217cca1\",\"zh-cn_component_datetime-picker.md\":\"60d69e0b\",\"zh-cn_component_descriptions.md\":\"6a2c5fcc\",\"zh-cn_component_dialog.md\":\"ba52e130\",\"zh-cn_component_divider.md\":\"639191e5\",\"zh-cn_component_drawer.md\":\"3a0bf571\",\"zh-cn_component_dropdown.md\":\"fa84f7c5\",\"zh-cn_component_empty.md\":\"c7635b32\",\"zh-cn_component_form.md\":\"d52ec6dc\",\"zh-cn_component_icon.md\":\"0487a8b6\",\"zh-cn_component_image.md\":\"9c120e45\",\"zh-cn_component_infinite-scroll.md\":\"38f46d39\",\"zh-cn_component_input-number.md\":\"8a71ee3f\",\"zh-cn_component_input.md\":\"d35eeb9c\",\"zh-cn_component_layout.md\":\"bc675fd0\",\"zh-cn_component_link.md\":\"89225971\",\"zh-cn_component_loading.md\":\"c9fae5ab\",\"zh-cn_component_menu.md\":\"bc7746a1\",\"zh-cn_component_message-box.md\":\"cb16e084\",\"zh-cn_component_message.md\":\"8be6a0d4\",\"zh-cn_component_notification.md\":\"002c9ad3\",\"zh-cn_component_overview.md\":\"3c3503ad\",\"zh-cn_component_page-header.md\":\"f1153fa0\",\"zh-cn_component_pagination.md\":\"7e316c0d\",\"zh-cn_component_popconfirm.md\":\"c8c261e8\",\"zh-cn_component_popover.md\":\"33396fe1\",\"zh-cn_component_progress.md\":\"a45ad1c6\",\"zh-cn_component_radio.md\":\"8d6a36fc\",\"zh-cn_component_rate.md\":\"b9374d23\",\"zh-cn_component_result.md\":\"da3ebb19\",\"zh-cn_component_scrollbar.md\":\"ed75c308\",\"zh-cn_component_segmented.md\":\"e983c8d7\",\"zh-cn_component_select-v2.md\":\"67dccf39\",\"zh-cn_component_select.md\":\"6d3c3517\",\"zh-cn_component_skeleton.md\":\"f43e715e\",\"zh-cn_component_slider.md\":\"a4306965\",\"zh-cn_component_space.md\":\"a3738b82\",\"zh-cn_component_statistic.md\":\"5bf4a0ca\",\"zh-cn_component_steps.md\":\"268b6c0d\",\"zh-cn_component_switch.md\":\"fee6f016\",\"zh-cn_component_table-v2.md\":\"7351c605\",\"zh-cn_component_table.md\":\"191078c2\",\"zh-cn_component_tabs.md\":\"43ccd873\",\"zh-cn_component_tag.md\":\"3243911c\",\"zh-cn_component_text.md\":\"e78046cb\",\"zh-cn_component_time-picker.md\":\"c889f795\",\"zh-cn_component_time-select.md\":\"9037b9bc\",\"zh-cn_component_timeline.md\":\"31c1d81c\",\"zh-cn_component_tooltip-v2.md\":\"7d03850d\",\"zh-cn_component_tooltip.md\":\"a254e320\",\"zh-cn_component_tour.md\":\"c2d42a56\",\"zh-cn_component_transfer.md\":\"f9d17f68\",\"zh-cn_component_tree-select.md\":\"be190e71\",\"zh-cn_component_tree-v2.md\":\"33e2a835\",\"zh-cn_component_tree.md\":\"c0d917d7\",\"zh-cn_component_typography.md\":\"958c01ce\",\"zh-cn_component_upload.md\":\"5e3a45cf\",\"zh-cn_component_watermark.md\":\"709c9962\",\"zh-cn_guide_changelog.md\":\"006e3eb8\",\"zh-cn_guide_commit-examples.md\":\"470a0272\",\"zh-cn_guide_dark-mode.md\":\"a8280f1d\",\"zh-cn_guide_design.md\":\"ecdfbc64\",\"zh-cn_guide_dev-faq.md\":\"3f406323\",\"zh-cn_guide_dev-guide.md\":\"fc4f7b58\",\"zh-cn_guide_i18n.md\":\"2bd9c6ed\",\"zh-cn_guide_installation.md\":\"8dda845f\",\"zh-cn_guide_migration.md\":\"152c0c06\",\"zh-cn_guide_namespace.md\":\"1489fc56\",\"zh-cn_guide_nav.md\":\"c82ea1cc\",\"zh-cn_guide_quickstart.md\":\"598a5162\",\"zh-cn_guide_ssr.md\":\"1faa6801\",\"zh-cn_guide_theming.md\":\"22b9a49a\",\"zh-cn_guide_transitions.md\":\"b40dd547\",\"zh-cn_guide_translation.md\":\"87f8e34c\",\"zh-cn_index.md\":\"209bfa3f\",\"zh-cn_resource_index.md\":\"07b05f83\"}")</script>
    <script type="module" async src="/assets/app.9c6c24e4.js"></script>
    
  </body>
</html>